<template>
	<view class="pv-safe-area">
		<view class="p-4 flex flex-column grid-gap-4">
			<text class="h9 font-weight-600">反馈类型</text>
			<view class="grid-columns-6 grid-gap-2">
				<text class="grid-column-2 bg-white rounded-4 p-2 text-center h9"
					v-for="item in WEBCONFIG.feedback_type" :key="item.value"
					:class="form.feedback_type == item.value ? 'bg-primary text-white' : ''" @tap="selected(item)">
					{{ item.label }}
				</text>
			</view>
			<textarea maxlength="250" placeholder="请输入6个字以上的问题描述" class="bg-white rounded-4 p-4 w-100 bs-box-border"
				v-model="form.content"></textarea>
			<text class="h9 font-weight-600">联系方式</text>
			<input type="tel" placeholder="请输入手机号便于联系(非必填)" v-model="form.mobile" class="p-4 bg-white rounded-4"
				maxlength="11">

			<view class="flex">
				<button class="flex-1 btn-primary btn-round" @click="submit()">提交反馈</button>
			</view>
		</view>
		<x-loading v-if="loading" />
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { useWebConfigStore, useRefs } from "@/stores";
import { $api, $message } from "@/utils";
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const loading = ref(false);
const form = ref({
	feedback_type: '',
	content: '',
	mobile: ''
})
const selected = (item: any) => {
	if (form.value.feedback_type == item.value) {
		form.value.feedback_type = ''
		return
	}
	form.value.feedback_type = item.value
}
const submit = () => {
	loading.value = true
	$api.Feedback.create(form.value).then((res: any) => {
		$message.success(res.msg);
		nextTick(() => {
			uni.navigateBack()
		})
	}).catch((err: any) => {
		$message.error(err.msg)
	}).finally(() => {
		loading.value = false
	})
}
</script>

<style lang="scss" scoped></style>
